<script setup lang="ts">
import { watch, ref, inject } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import Ball from "@visual/assets/icon/ball.svg?component";
import ReTextTooltip from "../../../components/ReTextTooltip";
import { convertStringToNumber } from "@visual/utils";
const middleComp = inject("middleComp", ref([]));
import { eventBus } from "@/views/all/visual/template/utils/eventBus";

defineOptions({
  name: "ListInDetect"
});
const isCollapsed = ref(false);
const props = withDefaults(
  defineProps<{
    propValue?: {
      contentList: Array<any>;
      title?: string;
      maxheight?: string;
      collapsed?: boolean;
      iconName?: string;
      size?: string;
      isDetect?: boolean;
    };
    noWrapper?: boolean;
  }>(),
  {
    propValue: () => ({
      maxheight: "400px",
      contentList: [],
      title: "",
      collapsed: false,
      iconName: "alert",
      size: "normal",
      isDetect: false
    }),
    noWrapper: false
  }
);

const classes = (type: number) => {
  let types = [0, 1, 2, 3];
  return {
    "list-item-color-normal": type === 0,
    "list-item-color-warn": type === 1,
    "list-item-color-error": type === 2,
    "list-item-color-offline": type === 3,
    "list-item-color-defalut": !types.includes(type)
  };
};

let detect = {};
watch(
  middleComp,
  val => {
    if (!props.propValue.isDetect) return;
    if (val && val.length) {
      middleComp.value.forEach(el => {
        const { item } = el;
        const { propValue, id } = item;
        const { routerKey } = propValue;
        if (routerKey) {
          detect[convertFormat(routerKey, "reverse")] = id;
          detect[routerKey] = id;
        }
      });
    }
  },
  { immediate: true }
);
function detectHandle(item) {
  if (!props.propValue.isDetect) return;
  console.log(middleComp);
  let res = detect[item.attrKey];
  if (res) {
    eventBus.emit("detectChange", res);
  }
  console.log(item);
}
function convertFormat(inputStr, mode = "forward") {
  if (mode === "forward") {
    // 正向转换逻辑
    const parts = inputStr.split("-");
    if (parts.length !== 3) return inputStr;

    const [first, second, third] = parts;
    const letters = first.slice(0, 2);
    const number = first.slice(2);

    return `${letters[0]}S-${second} ${third} ${number.padStart(2, "0")}`;
  } else {
    // 逆向转换逻辑
    const parts = inputStr.split(/[- ]/);
    if (parts.length !== 4) return inputStr;

    const [convertedFirst, second, third, paddedNum] = parts;
    const originalNumber = paddedNum.replace(/^0+/, "");
    const originalFirst = convertedFirst[0] + convertedFirst[1].replace("S", "Y") + originalNumber;

    return `${originalFirst}-${second}-${third}`;
  }
}
</script>

<template>
  <leftCompWrapper
    v-model="isCollapsed"
    :noWrapper="noWrapper"
    :title="propValue.title"
    :icon-name="propValue.iconName"
    :has-collapsed="propValue.collapsed"
  >
    <div v-if="isCollapsed || !propValue.collapsed" class="list-wrapper">
      <div
        v-for="(item, index) in props.propValue.contentList"
        :key="item.tagNum ? item.tagNum : index"
        :class="{ 'cursor-pointer': props.propValue.isDetect }"
        class="border-dashed border-b-[1px] border-[#C6C6C6] list-item-content"
        @click="detectHandle(item)"
      >
        <div class="list-item-content-title w-[70%]">
          <ReTextTooltip :style="{ color: 'rgba(0,0,0,0.8)' }" :content="item.title" />
        </div>
        <div class="flex items-center content-center">
          <Ball
            v-if="['正常', '异常', '报警', '离线'].indexOf(item.value) !== -1"
            :class="{
              'text-[#10b981]': item.value === '正常',
              'text-[#909399]': item.value === '离线',
              'text-[#ef4444]': ['异常', '报警'].indexOf(item.value) !== -1
            }"
          />
          <span :class="classes(item.status)">{{ convertStringToNumber(item.value) }}</span>
          <span v-if="item.unit" :class="classes(item.status)">{{ item.unit }}</span>
        </div>
      </div>
    </div>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
$listIcon: list-icon-;
$itemIcon: item-icon-;
$itemType: list-item-color-;

.#{$itemType}normal {
  color: #10b981;
}

.#{$itemType}warn {
  color: #f59e0b;
}

.#{$itemType}error {
  color: #ef4444;
}

.#{$itemType}offline {
  color: #909399;
}

.#{$itemType}default {
  color: #000;
}

.list-wrapper {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;

  .list-item-content {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    height: 23px;
    font-size: 11px;
    font-weight: 400;
    line-height: 23px;
    color: #000;
  }

  .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 4px;
  }

  .#{$listIcon}water,
  .#{$listIcon}totalwater {
    width: 16px;
    height: 20px;
  }

  .#{$listIcon}purewater {
    width: 20px;
    height: 18px;
  }

  .#{$listIcon}wastewater {
    width: 16px;
    height: 20px;
  }

  .#{$listIcon}elector {
    width: 20px;
    height: 16px;
  }

  .#{$itemIcon}water {
    background-color: rgb(71 134 255 / 15%);
  }

  .#{$itemIcon}totalwater {
    background: rgb(255 178 102 / 15%);
  }

  .#{$itemIcon}purewater {
    background: rgb(73 176 245 / 15%);
  }

  .#{$itemIcon}wastewater {
    background: rgb(139 138 230 / 15%);
  }

  .#{$itemIcon}elector {
    background: rgb(139 138 230 / 15%);
  }
}
</style>
